<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2">
        <el-card style="width: 100%; margin-top: 20px;">
          <h1 style="text-align: center">地址管理</h1>
          <el-divider></el-divider>
          <el-button type="primary" @click="handleAdd">新增地址</el-button>
          <el-table :data="addressList" style="width: 100%;margin-top:30px;" stripe>
            <el-table-column 
              prop="name" 
              align="center" 
              label="收货人">
            </el-table-column>
            <el-table-column 
              prop="phoneNumber" 
              align="center" 
              label="收货人电话">
            </el-table-column>
            <el-table-column 
              prop="postCode" 
              align="center" 
              label="邮编">
            </el-table-column>
            <el-table-column 
              align="center" 
              label="收货地址"
              :show-overflow-tooltip='true'>
              <template slot-scope="scope">
                {{scope.row.province}}{{scope.row.city}}{{scope.row.region}}{{scope.row.detailAddress}}
              </template>
            </el-table-column>
            <el-table-column 
              prop="price" 
              align="center" 
              label="是否默认地址">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.defaultStatus === 1" type="danger">是</el-tag>
                <el-tag v-else>否</el-tag>
              </template>
            </el-table-column>


            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleEdit(scope)">编辑</el-button>
                <el-button type="text" size="small" @click="handleDelete(scope)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 新增/编辑地址 -->
          <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑地址':'新建地址'">
            <el-form :model="address" label-width="80px" label-position="left">
              <el-form-item label="收货人">
                <el-input v-model="address.name" placeholder="收货人姓名" />
              </el-form-item>
              <el-form-item label="收货人电话">
                <el-input v-model="address.phoneNumber" placeholder="收货人电话" />
              </el-form-item>
              <el-form-item label="收货地址">
                <el-input v-model="address.province" placeholder="省" />
                <el-input v-model="address.city" placeholder="市" />
                <el-input v-model="address.region" placeholder="区" />
                <el-input v-model="address.detailAddress" placeholder="详细地址" />
              </el-form-item>
              <el-form-item label="邮编">
                <el-input v-model="address.postCode" placeholder="邮编" />
              </el-form-item>
              <el-form-item label="是否默认地址">
                <el-radio v-model="address.defaultStatus" label="0">否</el-radio>
                <el-radio v-model="address.defaultStatus" label="1">是</el-radio>
              </el-form-item>

            </el-form>
            <div style="text-align:right;">
              <el-button type="danger" @click="dialogVisible=false">取消</el-button>
              <el-button type="primary" @click="confirmSubmit">确认</el-button>
            </div>
          </el-dialog>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import { gettAddressList, addAddress, updateAddress, delAddress } from '@/api/address'

  export default {
    name: "index",
    created() {
      this.getAddressList()
    },
    data() {
      return {
        addressList: [
        ],
        address: {
          id: '',
          name: '',
          phoneNumber: '',
          province: '',
          city: '',
          region: '',
          detailAddress: '',
          postCode: '',
          defaultStatus: '0'
        },
        dialogVisible: false,
        dialogType: 'new',
        checked: {},
        select: [],
        price: 0,
        isAll: false,

      }
    },
    methods: {
      async getAddressList() {
        const res = await gettAddressList()
        console.log("gettAddressList",res)

        this.addressList = res.data
      },
      handleAdd() {
        this.address = {}
        // this.address.defaultStatus = '1'
        this.dialogType = 'new'
        this.dialogVisible = true
      },
      handleEdit(scope) {
        this.address = scope.row
        this.address.defaultStatus = String(scope.row.defaultStatus);
      
        this.dialogType = 'edit'
        this.dialogVisible = true
      },
      handleDelete(scope) {
        this.$confirm('确认删除此地址?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            await delAddress(scope.row.id).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
            })
            this.getAddressList()
          })
          .catch(() => { 
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },

      async confirmSubmit() {
        const isEdit = this.dialogType === 'edit'

        if (isEdit) {
          await updateAddress(this.address)
          this.$message({
              type: 'success',
              message: '更新地址成功!'
            })
        } else {
          await addAddress(this.address)
          this.$message({
              type: 'success',
              message: '创建地址成功!'
            })
        }

        this.dialogVisible = false
        this.getAddressList()

      },
    },
    /*computed: {
      ...mapGetters([
        'id'
      ])
    }*/
  }
</script>

<style scoped>

</style>
